import React from 'react';
import { Viewer } from '@bytemd/react';
import gfm from '@bytemd/plugin-gfm';
import highlight from '@bytemd/plugin-highlight';
import { useTranslation } from 'react-i18next';
import { Tag, Divider } from 'antd';
import type { Article } from '../types/article';
import 'bytemd/dist/index.css';
import 'highlight.js/styles/vs.css';

interface ArticlePreviewProps {
  article: Article;
}

export const ArticlePreview: React.FC<ArticlePreviewProps> = ({ article }) => {
  const { t } = useTranslation();
  const plugins = [gfm(), highlight()];

  return (
    <div className="article-preview">
      <h1 className="text-2xl font-bold mb-4">{article.title}</h1>
      <div className="article-meta text-gray-500 mb-6">
        {article.category && (
          <span className="mr-4">
            {t('article.preview.category')}: {article.category}
          </span>
        )}
        <span className="mr-4">
          {t('article.preview.status')}:{' '}
          <Tag color={article.published ? 'green' : 'orange'}>
            {article.published ? t('article.status.published') : t('article.status.draft')}
          </Tag>
        </span>
        {Array.isArray(article.tags) && article.tags.length > 0 && (
          <span>
            {t('article.preview.tags')}:{' '}
            {article.tags.map(tag => (
              <Tag key={tag} className="mr-1">{tag}</Tag>
            ))}
          </span>
        )}
      </div>
      <Divider />
      <div className="article-content prose max-w-none">
        <Viewer
          value={article.content || t('article.preview.noContent')}
          plugins={plugins}
        />
      </div>
    </div>
  );
};